import React from 'react';
import { Card, Row, Col, Spin } from 'antd';
import { useModel } from '@@/plugin-model/useModel';
import style from './style.module.less';

export default () => {
  const { initialState } = useModel('@@initialState')

  if (!initialState) {
    return <Spin/>
  }
  const { userinfo } = initialState;

  const infoList = [
    { label: '联系手机', value: userinfo?.nickname },
    { label: '个人邮箱', value: userinfo?.email },
    { label: '最后登录时间', value: userinfo?.login_time },
    { label: '最后登录IP', value: userinfo?.login_ip },
    { label: '注册时间', value: userinfo?.create_time },
  ];

  return <Row>
    <Col span={8}>
      <Card bordered={false}>
        <div className={style.avatarBox}>
          <div className={['ant-avatar', style.avatar].join(' ')}>
            <img src={userinfo?.avatar}/>
          </div>

          <p className={style.userName}>
            {userinfo?.nickname}
          </p>
        </div>

        <ul className={style.userInfo}>
          {infoList.map((info, i) => <li key={i}>{info.label}：{info.value ?? '无'}</li>)}
        </ul>
      </Card>
    </Col>
  </Row>
}
